<template>
    <h2></h2>
<table class="table-bordered" >
    <thead style="background-color: aqua;">
        <tr>
            <td>等级编号</td>
            <td>等级名称</td>
            <td>等级状态</td>
            <td>最小成长值</td>
            <td>最大成长值</td>
            <td>操作</td>
        </tr>
    </thead>
    <Tbody style="background-color: pink;">
        <tr v-for="item in Info">
            <td>{{ item. Rank_Id}}</td>
            <td>{{item.Rank_Name}}</td>
            <td v-show="item.Rank_State==true" style="color: green;">启用</td>
            <td v-show="item.Rank_State==false" style="color: red;">禁用</td>
            <td>{{item.Rank_Minpoint}}</td>
            <td>{{item.Rank_Maxpoint}}</td>
            <td>
                <a href="#" class="btn btn-danger" v-show="item.Rank_State==true" @click="UpdState(item.Rank_Id,0)">禁用</a>&emsp;
                <a href="#" class="btn btn-success"  v-show="item.Rank_State==false" @click="UpdState(item.Rank_Id,1)">启用</a>&emsp;
                <a href="#" @click="DelRank(item.Rank_Id)">删除</a>
            </td>
        </tr>

    </Tbody>
</table>

</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router=useRouter()
const   Info=ref([{
    "Rank_Id": 0,
    "Rank_Name": "",
    "Rank_State": false,
    "Rank_Maxpoint": 0,
    "Rank_Minpoint": 0,
}])
onMounted(()=>{
    loadDate();
})
const loadDate=()=>{
    axios.get("https://localhost:7035/api/Member/GetRanks")
    .then(res=>{
        Info.value=res.data
    })
}
//修改状态
const UpdState=(Rank_Id:number,state:number)=>{
    axios.put("https://localhost:7035/api/Member/UpdRankState",
        {
            params:{
                id:Rank_Id,
                state:state
            }
        }
    )
    .then(res=>{
       if(res.data>0){
            alert('修改成功')

        }
        else{
            alert('修改失败')
        }
    })
    

}
//删除等级信息
const DelRank=(Rank_Id:number)=>{
        if(confirm("确认删除吗?")){
            axios.get("https://localhost:7035/api/Member/DelMemberRank",
            {
                params:{
                    id:Rank_Id
                }
            }
        )
        .then(res=>{
            if(res.data>0){
                alert('删除成功')
                router.push("/GetRanks")
            }
            else{
                alert('删除失败')
            }
        })
    }

}
</script>